---
title: "Padding"
description: "Utilities for controlling an element's padding."
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/padding'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { numbersFirstByPrefix } from '@/utils/sortClasses'

export const classes = {
  plugin,
  sort: numbersFirstByPrefix,
}

## Add padding to a single side

Control the padding on one side of an element using the `p{t|r|b|l}-{size}` utilities.

For example, `pt-6` would add `1.5rem` of padding to the top of an element, `pr-4` would add `1rem` of padding to the right of an element, `pb-8` would add `2rem` of padding to the bottom of an element, and `pl-2` would add `0.5rem` of padding to the left of an element.

```html rose
<template preview>
  <div class="flex flex-wrap items-start justify-center text-white font-mono -mx-5">
    <div class="mx-5 bg-rose-500 bg-stripes bg-stripes-white rounded-md overflow-hidden pt-6">
      <div class="bg-rose-500 flex items-center justify-center py-3 px-4">
        pt-6
      </div>
    </div>
    <div class="mx-5 bg-rose-500 bg-stripes bg-stripes-white rounded-md overflow-hidden pr-4 mt-6">
      <div class="bg-rose-500 flex items-center justify-center py-3 px-4">
        pr-4
      </div>
    </div>
    <div class="mx-5 bg-rose-500 bg-stripes bg-stripes-white rounded-md overflow-hidden pb-8 mt-6">
      <div class="bg-rose-500 flex items-center justify-center py-3 px-4">
        pb-8
      </div>
    </div>
    <div class="mx-5 bg-rose-500 bg-stripes bg-stripes-white rounded-md overflow-hidden pl-2 mt-6">
      <div class="bg-rose-500 flex items-center justify-center py-3 px-4">
        pl-2
      </div>
    </div>
  </div>
</template>

<div class="**pt-6** ...">pt-6</div>
<div class="**pr-4** ...">pr-4</div>
<div class="**pb-8** ...">pb-8</div>
<div class="**pl-2** ...">pl-2</div>
```

## Add horizontal padding

Control the horizontal padding of an element using the `px-{size}` utilities.

```html emerald
<template preview>
  <div class="flex justify-center text-white font-mono">
    <div class="bg-emerald-500 bg-stripes bg-stripes-white rounded-md overflow-hidden px-8">
      <div class="bg-emerald-500 py-3 px-4">px-8</div>
    </div>
  </div>
</template>

<div class="**px-8** ...">px-8</div>
```

## Add vertical padding

Control the vertical padding of an element using the `py-{size}` utilities.

```html indigo
<template preview>
  <div class="flex justify-center text-white font-mono">
    <div class="bg-indigo-500 bg-stripes bg-stripes-white rounded-md overflow-hidden py-8">
      <div class="bg-indigo-500 py-3 px-4">py-8</div>
    </div>
  </div>
</template>

<div class="**py-8** ...">py-8</div>
```

## Add padding to all sides

Control the padding on all sides of an element using the `p-{size}` utilities.

```html fuchsia
<template preview>
  <div class="flex justify-center text-white font-mono">
    <div class="bg-fuchsia-500 bg-stripes bg-stripes-white rounded-md overflow-hidden p-8">
      <div class="bg-fuchsia-500 py-3 px-4">p-8</div>
    </div>
  </div>
</template>

<div class="**p-8** ...">p-8</div>
```

---

## Responsive

To control the padding of an element at a specific breakpoint, add a `{screen}:` prefix to any existing padding utility. For example, adding the class `md:py-8` to an element would apply the `py-8` utility at medium screen sizes and above.

```html
<div class="**md:py-8** ...">
  <!-- ... -->
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

---

## Customizing

### Padding scale

By default, Tailwind provides 19 fixed padding utilities for each side and axis.

If you'd like to customize these values for padding, margin, width, and height all at once, use the `theme.spacing` section of your `tailwind.config.js` file.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }
```

To customize only the padding values, use the `theme.padding` section of your `tailwind.config.js` file.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      padding: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme).

### Variants

<Variants plugin="padding" />

### Disabling

<Disabling plugin="padding" />
